<template>
  <div id='tmpl'>
      <!--1.0图片分类-->
      <div id="category">
          <ul v-bind = "{style:'width:'+ ulWidth + 'px'}">
              <li @click="getimages(0)">全部</li>
              <li v-for="item in cates" @click="getimages(item.id)">{{item.title}}</li>
          </ul>
      </div>
      <!--2.0图片列表-->
      <div id="imglist">
        <ul>
            <li v-for="item in list">
                <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                    <img v-lazy="item.img_url">
                    <div class="desc">
                        <h5 v-text="item.title"></h5>
                        <p v-text="item.zhaiyao"></p>
                    </div>
                </router-link>
            </li>
        </ul>
      </div>
  </div>
</template>
<script>
import {Toast} from 'mint-ui'; 
import common from '../../kits/common.js';
export default {
  data () {
    return {
        ulWidth:375,
        cates:[], // 用来存储图片分类数据的数组
        list:[]
    };
  },
  created(){
      //1,0获取图片分类数据
      this.getcates();
      //2.0加载图片数据
      var all = 0; //获取所有数据
      this.getimages(all);
  },
  methods:{
      //2.0确定图片数据
      getimages(cateid){
        //1.0如果方法的cateid参数没有传递，则默认是0；代表所有图片
        cateid = cateid || 0;
        //2.0确定url
        var url = common.apidomain + '/api/getimages/' + cateid;
        //3.0ajax请求数据
        this.$http.get(url).then(function(res){
            if(res.body.status != 0){
                Toast(res.body.message);
                return;
            }
            //将数据赋值给this.list
            this.list=res.body.message;
        })


      },
      getcates(){
        //1.0确定url
        var url = common.apidomain + "/api/getimgcategory";
        //2.0调用$http.get()方法获取数据
        this.$http.get(url).then(function(res){
            if(res.body.status !=0){
                Toast(res.body.message);
                return;
            }
            //3.0实现数据的赋值操作
            this.cates = res.body.message;
            //4.0实现当前分类数据所在ul的总长度 = 分类个数 * 每个分类数据的宽度
            var w = 65;
            var count = res.body.message.length + 1;
            this.ulWidth = w*count;
        })
      }
  }
}
</script>
<style lang="css" scoped>
/*图片分类样式*/
    #category{
        max-width:375px;
        overflow-x:auto;
        width:375px;
    }
    #category ul{
        margin:0;
        padding-left:10px;
    }
    #category li{
        list-style:none;
        display:inline-block;
        color:#0094ff;
        font-size:14px;
        padding:0 5px;
        cursor:pointer;
    }
    /*实现图片列表样式*/
    #imglist ul{
        padding-left:0; 
    }
    #imglist li {
        list-style:none;
        position:relative;
    }
    #imglist li img{
        width:100%;
        height:300px;
    }
    .desc{
        width:100%;
        background-color:rgba(0,0,0,0.4);
        
        position:absolute;
        bottom:2px;
        left:0;
    }
    .desc h5{
        color:#fff;
        font-size:14px;
        font-weight:700;
    }
    .desc p{
        color:#fff;
    }
</style>